/**
 *  学习目标：Todos 案例
 */
import { message } from 'antd';
import React, { useState, useEffect } from 'react';
import './styles/base.css';
import './styles/index.css';

export default function App() {
  // 从缓存中获取数据
  const [list, setlist] = useState(JSON.parse(localStorage.getItem('zuozuo-token')) || []);
  // 数据缓存
  useEffect(() => {
    localStorage.setItem('zuozuo-token', JSON.stringify(list));
  }, [list]);

  //   更改状态
  const henderChangState = id => {
    // console.log(123, id);
    // 更改数据
    const newList = list.map(item => ({
      ...item,
      isDone: item.id === id ? !item.isDone : item.isDone
    }));
    // 新值覆盖旧值
    setlist(newList);
  };
  //   删除数据
  const henderDelbyId = id => {
    const newList = list.filter(item => item.id !== id);
    setlist(newList);
  };
  //   添加数据
  const henderAddStatr = task => {
    console.log('task  ----->  ', task);
    const newList = [{ id: Date.now(), text: task, isDone: false }, ...list];
    setlist(newList);
  };
  return (
    <section className="todoapp">
      {/* 头部 */}
      <Header henderAddStatr={henderAddStatr} />
      {/* 主体 */}
      <Main list={list} henderChangState={henderChangState} henderDelbyId={henderDelbyId} />
      {/* 底部 */}
      <Footer />
    </section>
  );
}

function Header({ henderAddStatr }) {
  // 声明一个数据
  const [task, setTask] = useState('');
  const henderKeyDown = e => {
    if (e.keyCode === 13) {
      //   如果输入的数据为空，那么就不准做下一步操作
      if (task.trim().length === 0) {
        alert('输入框请不要为空');
        return;
      }
      console.log('task  ----->  ', task);
      //   需要将其添加到数组中
      henderAddStatr(task);
      //   清空数据
      setTask('');
    }
  };
  return (
    <header className="header">
      <h1>todos</h1>
      <input className="new-todo" placeholder="需要做什么" autoFocus value={task} onKeyDown={e => henderKeyDown(e)} onChange={e => setTask(e.target.value.trim())} />
    </header>
  );
}

function Main({ list, henderChangState, henderDelbyId }) {
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map(item => {
          return (
            <li key={item.id} className={item.isDone ? 'completed' : ''}>
              <div className="view">
                <input className="toggle" type="checkbox" checked={item.isDone} onChange={() => henderChangState(item.id)} />
                <label>{item.text}</label>
                <button className="destroy" onClick={() => henderDelbyId(item.id)}></button>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}
function Footer() {
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>1</strong> 剩余
      </span>
      <ul className="filters">
        <li>
          <a className="all selected" href="#/">
            全部
          </a>
        </li>
        <li>
          <a className="active" href="#/active">
            未完成
          </a>
        </li>
        <li>
          <a className="completed" href="#/completed">
            已完成
          </a>
        </li>
      </ul>
      <button className="clear-completed">清除已完成</button>
    </footer>
  );
}
